<script>
	$(function(){
		layui.use(['common', 'element'], function(){
			var element = layui.element();
			$('.picture').each(function(){
				var id = $(this).attr("id");
				layer.photos({
					photos: '#'+id,
					anim: 5
				}); 
			})	
		});
		var treeObj = $.fn.zTree.getZTreeObj("option_tree");
		// 点击按钮进入对比模式
		$("button[name='compare']").click(function(event) {
			// 对比模式
			var url = "<{:U('Teardown/compare')}>";			
			// 当前节点
			var nodes = treeObj.getSelectedNodes();
			var nid = nodes[0].id;
			// 获取数据
			var param = {"aid": $(":hidden[name='aid']").val(), "nid":nid};
			$.getJSON(url, param, function(res){
				!res || $("div.content").html(res.data);
			});
		});

		// navigation
		$(".breadCrumbs span[nid]").click(function(event) {
			var nid = $(this).attr("nid");
			var param = {
				"aid": $(":hidden[name='aid']").val(), 
				"nid": nid
			};
			var url = "<{:U('Teardown/dispatch')}>";
			layui.common.ajaxSubmit(url, param, function(res){
				$("div.content").html(res || "nothing is found...");
				var node = treeObj.getNodeByParam("id", nid);
				treeObj.selectNode(node);
			});
		});
		// Bill of Materials
		$("table.tbme a[nid]").click(function(event) {
			var nid = $(this).attr("nid");
			var param = {
				"aid": $(":hidden[name='aid']").val(), 
				"nid": nid
			};
			var url = "<{:U('Teardown/dispatch')}>";
			layui.common.ajaxSubmit(url, param, function(res){
				$("div.content").html(res || "nothing is found...");
				var node = treeObj.getNodeByParam("id", nid);
				treeObj.selectNode(node);
			});
		});
		$('.scrollBar').niceScroll({
		    cursorcolor: "rgb(153,153,153)",//#CC0071 光标颜色
		    cursoropacitymax: 1,  //改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0
		    touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备
		    cursorwidth: "5px",   //像素光标的宽度
		    cursorborder: "0",    //   游标边框css定义
		    cursorborderradius: "5px",//以像素为光标边界半径
		    autohidemode: true    //是否隐藏滚动条
		});

		<notempty name="node.desp">
			// 渲染ueditor编辑的内容
			uParse('#desp', {rootPath: '../'});
		</notempty>

		// 折叠面板
		$(".slideBtn").click(function() {	
	        var controlDIV = $(this).next();
	        if (controlDIV.is(":hidden")) {
	            controlDIV.slideDown("slow");
	            $(this).find("i").removeClass("icon-down").addClass("icon-up");
	        } else{
	            controlDIV.slideUp("slow");
	            $(this).find("i").removeClass("icon-up").addClass("icon-down");
	        }
	    });
	})
</script>

<!-- 当前位置 -->
<div class="breadCrumbs"><i class="icon icon-home"></i><span><{$title}></span></div>

<!-- 零部件信息概要 -->
<div class="performanceDteial">
	<div class="thumb">
		<notempty name="node.glob_pic">
			<img src="/<{:C('DATA_THUMB_IMAGES')}><{$node['glob_pic']|key}>" alt="<{$node['glob_pic']|current}>">
		<else/>
			<img src="__PUBLIC__/images/product/teardownnopic.png" alt="默认图片">
		</notempty>
	</div>
	<div class="tbInfo">
		<table class="tb_carInfo">
			<tr>
				<th>Part name</th>
				<td><{$node.name}></td>
			</tr>
			<tr>
				<th>Ref No.</th>
				<td><{$node.ref}></td>
			</tr>
			<tr>
				<th>Quantity</th>
				<td><{$node.quantity}></td>
			</tr>
			<tr>
				<th>Weight</th>
				<td><{$node.weight}></td>
			</tr>
			<tr>
				<th>Edit by</th>
				<td><{$node.modifier}></td>
			</tr>
			<tr>
				<th>Last Revised</th>
				<td><{$node.modtime|date="d/m/Y",###}></td>
			</tr>
		</table>
	</div>

	<div class="mainRight">
		<button class="layui-btn layui-btn-small" name="compare" compared="0"><i class="icon icon-document"></i>Compare</button>
	    <button class="layui-btn layui-btn-normal layui-btn-small"><i class="icon icon-favorite"></i>Add Favorite</button>
	    <button class="layui-btn layui-btn-warm layui-btn-small layui-btn-report"><i class="icon icon-report"></i>Report</button>
	    <button class="layui-btn layui-btn-danger layui-btn-small"><i class="icon icon-scanning"></i>Scanning Part</button>
	</div>

	<div class="clearfix"></div>
</div>

<!-- 如果是部件则显示 -->
<eq name="node.type" value="0">
	<!-- 爆炸图 -->
	<notempty name="node.navi_pic">	
		<blockquote class="layui-elem-quote slideBtn">Navigation<i class="icon-up"></i></blockquote>
		<div class="abcdefg">
			<foreach name="node.navi_pic" item="vo">
				<div class="navigation">
					<img src="/<{:C('DATA_IMAGES').$key}>" alt="<{$vo}>">
				</div>
			</foreach>
		</div>
	</notempty>
	<!-- 饼图 -->
	<if condition="$weight neq null or $material neq null or $manufacturer neq null">
		<blockquote class="layui-elem-quote slideBtn">Pie Charts<i class="icon-up"></i></blockquote>
		<div class="abcdefg">
			<div class="layui-tab layui-tab-brief">
			    <ul class="layui-tab-title">
			    	<notempty name="weight"><li class="layui-this">Weight</li></notempty>
			        <notempty name="material"><li>Material</li></notempty>
			        <notempty name="manufacturer"><li>Manufacturer</li></notempty>
			    </ul>
			    <div class="layui-tab-content">
			    	<notempty name="weight">
				        <div class="layui-tab-item layui-show"><div id="chart_weight" style="height:450px;text-align: center;"></div></div>
				        <script>$("#chart_weight").width($(".layui-show").width());pie_chart("chart_weight", <{$weight}>);</script>
			        </notempty>
			        <notempty name="material">
				        <div class="layui-tab-item"><div id="chart_material" style="height:450px;text-align: center;"></div></div>
				        <script>$("#chart_material").width($(".layui-show").width());pie_chart("chart_material", <{$material}>);</script>
			        </notempty>
			        <notempty name="manufacturer">
				        <div class="layui-tab-item"><div id="chart_manufacturer" style="height:450px;text-align: center;"></div></div>
				        <script>$("#chart_manufacturer").width($(".layui-show").width());pie_chart("chart_manufacturer", <{$manufacturer}>);</script>
			        </notempty>
			    </div>
			</div>
		</div>
	</if>
</eq>

<!-- 以下只要存在就显示 -->
<!-- 零部件明细 -->
<blockquote class="layui-elem-quote slideBtn">Bill of Materials<i class="icon-up"></i></blockquote>
<div class="abcdefg material-bill scrollBar">
	<table class="tbme">
	    <thead>
	        <tr>
	            <th>Part Name</th>
	            <th>Count</th>
	            <th>Cost</th>
	            <th>Weight(kg)</th>
	            <th>Manufacturer</th>
	            <th>Material</th>
	            <th>Measurement</th>
	            <th>Ref</th>
	        </tr>
	    </thead>
		<volist name="lists" id="vo">
			<tr>
				<td><{$vo.name}></td>
				<td><{$vo.part.quantity}></td>
				<td><{$vo.part.cost}></td>
				<td><{$vo.part.weight}></td>
				<td><{$vo.part.manufacturer}></td>
				<td><{$vo.part.material}></td>
				<td><{$vo.part.measurement}></td>
				<td><{$vo.part.ref}></td>
			</tr>
		</volist>
	</table>
</div>

<!-- 图片信息 -->
<if condition="$node['glob_pic'] neq null or $node['fast_pic'] neq null or $node['meas_pic'] neq null or $node['code_pic'] neq null">
	<blockquote class="layui-elem-quote slideBtn">Part Picture<i class="icon-up"></i></blockquote>
	<div class="abcdefg">
		<div class="layui-tab layui-tab-brief">
		    <ul class="layui-tab-title">
		        <li class="layui-this">Global</li>
		        <li>Fastener</li>
		        <li>Measure</li>
		        <li>Code</li>
		    </ul>
		    <div class="layui-tab-content part_picture">
		        <div class="layui-tab-item layui-show">
		            <div class="picture" id="g-1">
		                <foreach name="node.glob_pic" item="vo">
		                    <div class="thumblist">
		                        <img src="/<{:C('DATA_THUMB_IMAGES').$key}>" layer-src="/<{:C('DATA_IMAGES').$key}>" alt="<{$vo}>">
		                        <span><{$vo}></span>
		                    </div>
		                </foreach>
		            </div>
		        </div>
		        <div class="layui-tab-item">
		            <div class="picture" id="g-2">
		                <foreach name="node.fast_pic" item="vo">
		                    <div class="thumblist">
		                        <img src="/<{:C('DATA_THUMB_IMAGES').$key}>" layer-src="/<{:C('DATA_IMAGES').$key}>" alt="<{$vo}>">
		                        <span><{$vo}></span>
		                    </div>
		                </foreach>
		            </div>
		        </div>
		        <div class="layui-tab-item">
		            <div class="picture" id="g-3">
		                <foreach name="node.meas_pic" item="vo">
		                    <div class="thumblist">
		                        <img src="/<{:C('DATA_THUMB_IMAGES').$key}>" layer-src="/<{:C('DATA_IMAGES').$key}>" alt="<{$vo}>">
		                        <span><{$vo}></span>
		                    </div>
		                </foreach>
		            </div>
		        </div>
		        <div class="layui-tab-item">
		            <div class="picture" id="g-4">
		                <foreach name="node.code_pic" item="vo">
		                    <div class="thumblist">
		                        <img src="/<{:C('DATA_THUMB_IMAGES').$key}>" layer-src="/<{:C('DATA_IMAGES').$key}>" alt="<{$vo}>">
		                        <span><{$vo}></span>
		                    </div>
		                </foreach>
		            </div>
		        </div>
		    </div>
		</div>
	</div>
</if>

<notempty name="node.desp">
	<!-- 安装状态描述 -->
	<blockquote class="layui-elem-quote slideBtn">Assembly Process<i class="icon-up"></i></blockquote>
	<div class="abcdefg">
		<div id="desp"><{$node.desp}></div>
	</div>
</notempty>

<blockquote class="layui-elem-quote end"><i class="icon icon-noticeText"></i>THE END!</blockquote>